<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_el的两种写法</title>
  <script type="text/javascript" src="./../vue.js/vue.js"></script>
</head>

<body>

  <div id="root">
    <h1>你好, {{name}}</h1>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    // 第一种写法
    new Vue({
      el: '#root',
      data: {
        name: 'hello vue'
      }
    })



    // 第二种写法
    const v = new Vue({
      data: {
        name: 'hello vue'
      }
    })
    console.log('打印vue实例:', v)

    // 挂载
    v.$mount('#root')
  </script>
</body>

</html>
<!-- 
    1. el   有 2 种写法
      (1). new Vue时候配置 el属性
      (2). 先创建 Vue实例, 随后在通过 vm.$mount('#root') 指定el的值. 
-->